<div id="panel-usuario-page" class="container panel-usuario-container">
    <div class="row">
        <section id="panel-usuario-container" class="span12 box-container">
            <header class="box-header">
                <span class="border-width bg-color-14"></span>
                <h2>Mi cuenta</h2>
            </header>

            <div class="row-fluid section-content">
                <div id="panel-menu" class="span2 border-left">
                    <ul>
                        <li class="span box-item box-padding">
                            <a href="usuario">
                                <span class="border-width bg-color-07"></span>
                                <span class="icons icons-panel icon-datos-de-usuario"></span>
                                <span class="text">mis datos</span>
                            </a>
                        </li>
                        <li class="span box-item box-padding">
                            <a href="contrasena">
                                <span class="border-width bg-color-07"></span>
                                <span class="icons icons-panel icon-lock"></span>
                                <span class="text">contrase&ntilde;a</span>
                            </a>
                        </li>
                        <li class="span box-item box-padding">
                            <a href="mensajes">
                                <span class="border-width bg-color-07"></span>
                                <span class="icons icons-panel icon-mail"></span>
                                <span class="text">mensajes<em class="count"></em></span>
                            </a>
                        </li>
                        <li class="span box-item box-padding">
                            <a href="favoritos">
                                <span class="border-width bg-color-07"></span>
                                <span class="icons icons-panel icon-favorite"></span>
                                <span class="text">favoritos</span>
                            </a>
                        </li>
                        <li class="span box-item box-padding">
                            <a href="#mercado-limbo">
                                <span class="border-width bg-color-07"></span>
                                <span class="icons icons-panel icon-mercado-limbo"></span>
                                <span class="text">mercado limbo</span>
                            </a>
                        </li>
                        <li class="span box-item box-padding">
                            <a href="voluntario">
                                <span class="border-width bg-color-07"></span>
                                <span class="icons icons-panel icon-voluntario"></span>
                                <span class="text">voluntario</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="panel-section" class="span10">
                </div>
            </div>
        </section>
    </div>
</div>

<!-- USUARIO -->
<textarea class="hide" id="usuario-page-container">
<article id="usuario-page" class="datos-de-usuario-container page-container">
    <form id="form-datos-personales" method="post" action="${baseUrl}controllers/usuarioController/save">
        <div class="row-fluid">
            <header class="title">
                <span class="icons icons-panel icon-datos-personales"></span>
                <h3 class="font-color-15">Datos personales</h3>
            </header>

            <div class="content">
                <div class="row-fluid">
                    <span class="span"></span>
                    <label id="nick" class="field-container span4">
                        <b class="title span">Nombre</b>
                        <input type="text" class="field" value="${usuarioNombre}" id="user-name-field" name="usuarioNombre"/>
                    </label>
                     <label id="nick" class="field-container span4">
                        <b class="title span">Apellido</b>
                       <input type="text" class="field" value="${usuarioApellido}" id="user-lastname-field" name="usuarioApellido"/>
                    </label>
                    <label id="email" class="field-container span3">
                        <b class="title span">Direccion de email</b>
                        <span class="value span">${usuarioEmail}</span>
                    </label>
                </div>
                <div class="row-fluid">
                    <span class="span"></span>
                    <label for="fecha-de-nacimiento-field" class="field-container fecha-de-nacimiento-field span4">
                        <b class="title span">Fecha de nacimiento</b>
                        <input type="text" value="${usuarioNacimiento}" name="fecha-de-nacimiento-field" id="fecha-de-nacimiento-field" class="field span datepicker" readonly="readonly"/>
                    </label>
                </div>
                <div class="row-fluid">
                    <span class="span"></span>
                    <label id="genero" class="field-container span8">
                        <b class="title span">G&eacute;nero</b>
                        <label class="span3 radio" for="masculino">
                            <span class="value">Masculino</span>
                            <input type="radio" class="radio" value="1" id="masculino" name="usuarioGenero" ${generoMasculino}/>
                        </label>
                        <label class="span3 radio" for="femenino">
                            <span class="value">Femenino</span>
                            <input type="radio" class="radio" value="2" id="femenino" name="usuarioGenero" ${generoFemenino}/>
                        </label>
                    </label>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <header class="title">
                <span class="icons icons-panel icon-datos-imagenes"></span>
                <h3 class="font-color-15">Cambia tu imagen de perfil</h3>
            </header>

            <div class="content">
                <label class="field-container image-container span3">
                    <b class="title">Imagen actual</b>
                    <div class="image-preview">
                        <img src="${usuarioAvatar}?width=120&height=120" id="imagenUsuario" alt="${usuarioNombre} ${usuarioApellido}" title="${usuarioNombre} ${usuarioApellido}"/>
                    </div>
                </label>
                <p id="imagesFacebookContainer" style="display: none">
                    <input type="checkbox" name="imagesFacebook" id="imagesFacebook" ${checked} />
                    <label for="imagesFacebook">Usar imagen de Facebook</label>
                </p>
                <label class="field-container span6" id="fileuploaderContainer" style="display: ${display}">
                    <div id="fileuploader"></div>
                    <input type="hidden" name="time" value="" id="time" />
                </label>
            </div>
        </div>

        <div class="row-fluid">
            <header class="title">
                <span class="icons icons-panel icon-datos-ubicacion"></span>
                <h3 class="font-color-15">Ubicaci&oacute;n <em>(Complet&aacute; para poder mostrarte resultados del mapa directamente en tu ubicaci&oacute;n)</em></h3>
            </header>

            <div class="content">
                <div id="ubicacion" class="span8">
                    <!--<label class="field-container span3">
                        <b class="title">Pa&iacute;s</b>
                        <select id="pais-dropdown" class="field-dropdown span" name="pais-field">
                            <option value="1">Argentina</option>
                            <option value="2">Uruguay</option>
                        </select>
                    </label>-->
                    <label class="field-container span3">
                        <b class="title">Regi&oacute;n</b>
                        ${regionToSelect}
                    </label>
                    <label class="field-container span3">
                        <b class="title">Partido</b>
                        ${provinciaToSelect}
                    </label>
                    <label id="comuna-dropdown" class="field-container span3">
                        <b class="title">Comuna</b>
                        ${comunaToSelect}
                    </label>
                </div>
            </div>
        </div>
        <div class="row-fluid content">
            <button class="btn btn-green" id="submit-form-datos-personales"><span class="text">Actualizar perfil</span></button>
        </div>
    </form>
</article>
</textarea>

<!-- CONTRASE�A -->
<textarea class="hide" id="contrasena-page-container">
<article id="contrasena-page" class="contrasena-container page-container">
    <form id="form-contrasena">
        <div class="row-fluid">
            <header class="title">
                <span class="icons icons-panel icon-lock-active"></span>
                <h3 class="font-color-15">Cambia tu contrase&ntilde;a</h3>
            </header>
            <div class="content">
                <div class="row-fluid">
		    <p  id="leyenda" class="hide">Todav&iacute;a no ten&eacute;s tu contrase&ntilde;a Donde Reciclo. Actualmente est&aacute;s ingresando mediante Facebook login. Al generar una contrase&ntilde;a vas a poder acceder tanto desde el login Donde Reciclo, como desde Facebook Login. </p>
                    <span class="span"></span>
                    <label class="field-container span8" id="current_pass_container">
                        <b class="title span">Contrase&ntilde;a actual</b>
                        <input type="text" class="field span9" value="" id="current_pass" name="current_pass"/>
                    </label>
                    <label class="field-container span8">
                        <b class="title span">Contrase&ntilde;a nueva</b>
                        <input type="text" class="field span9" value="" id="new_pass" name="new_pass"/>
                    </label>
                    <label class="field-container span8">
                        <b class="title span">Reeingresa tu contrase&ntilde;a nueva</b>
                        <input type="text" class="field span9" value="" id="re_new_pass" name="re_new_pass"/>
                    </label>
                </div>
            </div>
            <div class="content">
                <p id="errorContrasena" style="text-align: center; width: 460px"></p>
                <p id="waiting" style="width: 460px"></p>
            </div>
        </div>

        <div class="row-fluid content">
            <a href="javascript:void(0);" class="btn btn-green" id="submit-form-contrasena"><span class="text">Actualizar contrase&ntilde;a</span></a>
        </div>
    </form>
</article>
</textarea>

<!-- MENSAJE -->
<div class="hide" id="mensajes-page-container">
    <article id="mensajes-page" class="mensajes-container page-container">
	<div id="mensajes-list" class="row-fluid">
	    <header class="title">
		<span class="icons icons-panel icon-mail-active"></span>
		<h3 class="font-color-15">Mensajes</h3>
		<a id="btn-crear-mensajes" class="aside font-color-15" href="javascript:void(0);"><span class="icons icons-panel icon-mail-crear"></span><span class="text">Componer mensaje</span></a>
	    </header>

	    <div class="content">
		<div class="row-fluid">
		    <ul class="box-list" id="listarMensajes">
		    </ul>
		</div>
	    </div>
	</div>
    </article>
</div>

<!-- COMPONER MENSAJE -->
<div class="hide" id="componerMensaje-page-container">
    <article id="componerMensaje-page" class="mensajes-container page-container">
	<div id="crear-mensajes">
	    <header class="title">
		<span class="icons icons-panel icon-mail-crear"></span>
		<h3 class="font-color-15">${componerTitulo}</h3> <!-- Conversaci&oacute; con ${emisor} -->
		<a class="aside font-color-15 btn-listar-mensajes" href="mensajes"><span class="text"><span class="icons icon-back-arrow"></span>Volver</span></a>
	    </header>
	    <div class="content">
		<form id="form-crear-mensajes" class="row-fluid">
		    <label class="field-container">
			<b class="title span">Destinatario</b>
			<input type="text" class="field span6" value="" id="destinatario_field" name="destinatario_field"/>
			<input type="hidden" value="" id="destinatario" name="destinatario"/>
		    </label>
		    <label class="field-container">
			<b class="title span">Mensaje</b>
			<textarea type="text" class="field span" value="" id="mensaje_field" name="mensaje_field"></textarea>
		    </label>
		</form>
	    </div>
	    <div class="content submit-container">
		<a class="btn btn-green submit-form-crear-mensajes"><span class="text">Enviar</span></a>
	    </div>
	</div>
    </article>
</div>

<!-- CONVERSACION -->
<div class="hide" id="conversacion-page-container">
    <article id="conversacion-page" class="mensajes-container page-container">
	<div id="conversacion">
	    <header class="title">
		<span class="icons icons-panel icon-mail-crear"></span>
		<h3 class="font-color-15">Componer mensaje</h3>
		<a class="aside font-color-15 btn-listar-mensajes" href="mensajes"><span class="text"><span class="icons icon-back-arrow"></span>Volver</span></a>
	    </header>
	    <div class="content">
		<div class="row-fluid">
		    <ul class="box-list" id="listarConversacion">
		    </ul>
		</div>
	    </div>
	    <div class="content">
		<form id="form-responder" class="row-fluid">
		    <label class="field-container">
			<b class="title span">Responder</b>
			<textarea type="text" class="field span" value="" id="mensaje_field" name="mensaje_field"></textarea>
			<input type="hidden" value="${destinatario}" id="destinatario" name="destinatario"/>
		    </label>
		</form>
	    </div>
	    <div class="content submit-container">
		<a class="btn btn-green submit-form-crear-mensajes"><span class="text">Enviar</span></a>
	    </div>
	</div>
    </article>
</div>

<!-- ITEM MENSAJE -->
<textarea class="hide" id="mensajeTpl">
<li class="box-item span" id="mensaje${mensajeId}">
    <a href="javascript:void(0);" class="span11 verConversacion" data-emisor="${emisor}">
        <span class="span1"></span>
        <div class="span11">
            <h4 class="span10 title">${mensajeAsunto}</h4>
            <p class="descripcion span10">${mensajeContenido}</p>
            <div class="date span2"><span class="text">${mensajeFecha}</span></div>
        </div>
    </a>
    <div class="span1"></div>
    <!--<a href="javascript:void(0);" class="remove span1" title="Eliminar" data-id="${mensajeId}"><span class="icons icons-panel icon-delete"></span></a>-->
</li>
</textarea>

<!--FAVORITOS-->
<textarea class="hide" id="favoritos-page-container">
<article id="favoritos-page" class="favoritos-container page-container">
    <div class="row-fluid">
        <header class="title">
            <span class="icons icons-panel icon-favorite-active"></span>
            <h3 class="font-color-15">Puntos de reciclado favoritos</h3>
            <?php echo(htmlentities(Categoria::toSelect())); ?>
            <!--<select class="field-dropdown span3" id="categoria-field">
                <option value="0">Filtr&aacute; por categor&iacute;a</option>
            </select>-->
        </header>

        <div class="content">
            <div class="row-fluid">
                <ul class="box-list span" id="listarFavoritos"></ul>
            </div>
        </div>
    </div>
</article>
</textarea>

<textarea class="hide" id="favoritoTpl">
<li class="box-item span" id="favorito${favoritoId}">
	<span class="markers marker-${favoritoCategoria}"></span>
	<div class="span9">
		<h4 class="span9 title">${favoritoNombre}</h4>
		<ul class="left unstyled span6">
			<li><span class="title">Direccion:</span><span class="text">${favoritoDireccion}</span></li>
			<li><span class="title">Tel:</span><span class="text">${favoritoTelefono}</span></li>
		</ul>
		<ul class="right unstyled span6">
			<li><span class="title">Horarios:</span><span class="text">${favoritoHorarios}</span></li>
			<li><span class="title">Reciben:</span><span class="text">${favoritoReciben}</span></li>
		</ul>
	</div>
	<span class="actions span1">
		<a href="${baseUrl}mapa/recicladora/${favoritoNombreUrl}/${favoritoCategoria}/${favoritoId}" class="go" title="Ir"><span class="icons icon-go-arrow"></span></a>
		<a href="javascript:void(0);" class="remove"  data-id="favorito${favoritoId}" title="Eliminar"><span class="icons icons-panel icon-delete"></span></a>
	</span>
</li>
</textarea>

<script type="text/javascript" src="<?php echo base_url(); ?>resources/jquery/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/js/fileuploader.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/js/panelUsuarioController.js"></script>